<template>
    <!--<transition name="el-zoom-in-center">-->
        <div>
            <div @click="AnchorTodo" class="me-to-top" style="bottom: 150px;">
                <el-tooltip class="item" effect="dark" content="点击此处，进入ToDo小功能🕒" placement="left">
                    <i class="el-icon-s-claim"></i>
                </el-tooltip>
            </div>
            <div @click="AnchorBlog" class="me-to-top" style="bottom: 100px;">
                <el-tooltip class="item" effect="dark" content="点击此处，进入博客小功能🕊️" placement="left">
                <i class="el-icon-edit-outline"></i>
                </el-tooltip>
            </div>
            <div class="me-to-top" style="bottom: 50px;">
                <el-tooltip class="item" effect="dark" content="点击此处，分享🚩" placement="left">
                <i class="el-icon-share"></i>
                </el-tooltip>
            </div>
        </div>
</template>

<script>
    export default {
        name: 'Anchor',
        data() {
            return{

            }
        },
        methods: {
            AnchorTodo() {
                this.$router.push({path:'/commonTodo'})
            },
            AnchorBlog(){
                this.$router.push({path:'/commonBlog'})
            },
        },
    }
</script>

<style>
    .me-to-top {
        /*background-color: #fff;*/
        position: fixed;
        right: 100px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        transition: .3s;
        /*box-shadow: 0 0 6px rgba(0, 0, 0, .12);*/
        z-index: 5;
    }

    .me-to-top i {
        color: #43385c;
        display: block;
        line-height: 40px;
        text-align: center;
        font-size: 30px;
    }

</style>